<template>
  <Editor
    :value="value"
    :mode="mode"
    :plugins="plugins"
    :uploadImages="uploadImages"
    @change="handleChange"
    :locale="zhHans"
  />
</template>

<script setup lang="ts">
import "juejin-markdown-themes/dist/juejin.min.css";
import { Editor } from "@bytemd/vue-next";
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import zhHans from "bytemd/locales/zh_Hans.json";

// 富文本编辑器插件（支持表格、语法高亮）
const plugins = [gfm(), highlight()];

/**
 * 定义组件属性类型
 */
interface Props {
  value: string;
  mode?: string;
  uploadImages: Function;
  handleChange: (v: string) => void;
}

/**
 * 定义组件默认初始值
 */
const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  mode: () => "auto",
  uploadImages: () => {},
  handleChange: () => {},
});
</script>

<style scoped>
/*隐藏富文本编辑器的GitHub图标*/
/*.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {
  display: none;
}*/
</style>